/*
 * @Author: shengduiliang 1107722390@qq.com
 * @Date: 2024-04-27 23:01:34
 * @LastEditors: shengduiliang 1107722390@qq.com
 * @LastEditTime: 2024-05-06 21:38:00
 * @FilePath: /treasury/src/pages/index/index.tsx
 * @Description: 首页界面
 */
import { memo, useState } from 'react'
import to from 'await-to-js'
import { Text, View } from '@tarojs/components'
import { ArrowRight, Card, CdnImage, FloatAddButton, SearchBar } from '@/ui-components'
import { getUserInfo } from '@/network/user'
import auth from '@/network/auth'
import { dialog } from '@/utils'
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { User, setUser } from "@/store/userSlice";
import Taro from '@tarojs/taro'
import { TreasuryRoleColor, TreasuryRoleName } from '@/constants'
import classNames from 'classnames'
import { useMount } from '@/hooks'
import { UserTreasury } from '@/store/treasurySlice'
import './index.scss'



const initUserInfo = async (): Promise<User> => {
  await auth.login()
  const [err, user] = await to(getUserInfo())
  if (err) {
    Dialogalert({
      content: '获取用户信息失败'
    })
    return Promise.reject()
  }
  return user
}

interface UserTreasuryItemProps {
  treasury: UserTreasury
  onClick: () => void
}

const TreasuryItem = memo(({ treasury, onClick } : UserTreasuryItemProps ) => {
  return (
    <Card padding onClick={() => onClick()}>
      <View className='row-between-center'>
        <View className='row-start-stretch flex-1'>
          <CdnImage src={treasury.treasuryLogo} className='image-160 border-radius-small' />
          <View className='column-between-start flex-1 ml-medium mr-large'>
            <View className='row-between-center w-100'>
              <View className='text-title'>{treasury.treasuryName}</View>
              <View className={classNames(TreasuryRoleColor[treasury.treasuryRole], 'text-primary')}>{TreasuryRoleName[treasury.treasuryRole]}</View>
            </View>
            <View className='text-normal'>{treasury.username}</View>
            <View className='text-normal'>本宝库积分：<Text className='success'>{treasury.userScore}</Text></View>
          </View>
        </View>
        <ArrowRight />
      </View>
    </Card>
  )
})

export default function Home() {

  const [treasuryName, setTreasuryName] = useState('')
  const dispatch = useAppDispatch()

  const user = useAppSelector(state => state.user)

  useMount(async () => {
    const user = await initUserInfo()
    dispatch(setUser(user))
    if (!user.enabled) {
      Dialogalert({
        content: '请先完善个人信息',
        onConfirm: () => {
          Taro.navigateTo({
            url: '/pages/user-update/index'
          })
        }
      })
    }
  })

  return (
    <View className='index safe-bottom'>
      <SearchBar placeholder='请输入在线宝库名称' value={treasuryName} onChange={setTreasuryName} />
      {
        user?.treasuryList?.map((treasury) => (
          <TreasuryItem
            key={treasury.treasuryId}
            treasury={treasury}
            onClick={() => {
              Taro.navigateTo({
                url: `/pages/treasury/index/index?userTreasuryId=${treasury.userTreasuryId}`
              })
            }}
          />
        ))
      }
      <FloatAddButton
        onClick={() => {
          Taro.navigateTo({
            url: '/pages/treasury/create/index'
          })
        }}
      />
    </View>
  )
}
